<template>
  <div class="g6-component-toolbar" :style="{left:position.x,top:position.y}">
    <el-button
      v-for="item in toolBarMenu"
      :key="item.type"
      size="mini"
      type="text"
      :code="item.type"
      :title="item.label"
      :disabled="disabled(item.type)"
      @click="(e)=>toolItemClick(item.type,e)"
    >
      <custom-icon v-if="item.icon" :icon-type="item.icon" />
    </el-button>
  </div>
</template>

<script>
import { EnumToolBarType } from './G6Utils/constant';
import CustomIcon from '@/components/CustomIcon';
export default {
  name: 'ToolBar',
  components: { CustomIcon },
  props: {
    toolBarMenu: {
      type: Array,
      required: false,
      default: () => Object.values(EnumToolBarType)
    },
    position: {
      type: Object,
      required: false,
      default: () => ({ x: '0px', y: '0px' })
    }
  },
  data() {
    return {
      g6Utils: this.$parent.g6Utils
    };
  },
  computed: {
    canUndo() {
      /* 如果首次打开清除操作栈则不需要过滤渲染操作*/
      // return !(this.g6Utils.graph.getUndoStack().length - 1);
      return !(this.g6Utils.graph.getUndoStack().length);
    },
    canRedo() {
      return !this.g6Utils.graph.getRedoStack().length;
    },
    disabled() {
      return function(type) {
        if (type === EnumToolBarType.undo.type) {
          return this.canUndo;
        } else if (type === EnumToolBarType.redo.type) {
          return this.canRedo;
        } else {
          return false;
        }
      };
    }
  },

  methods: {
    toolItemClick(action = '', event = null) {
      switch (action) {
        case EnumToolBarType.redo.type:
          this.g6Utils.redo();
          break;
        case EnumToolBarType.undo.type:
          this.g6Utils.undo();
          break;
        case EnumToolBarType.autoZoom.type:
          this.g6Utils.graph.fitView([20, 20]);
          break;
        case EnumToolBarType.refreshLayout.type:
          this.g6Utils.graph.layout();
          break;
        default:
      }
      this.$emit('toolBarClick', action, event);
    }
  }
};
</script>

<style scoped lang="scss">
  .g6-component-toolbar{
    z-index: 100;
    >button{
      font-size: 18px;
      padding: 0;
    }
  }
</style>
